<template>
  <div class="search-header">
    <header>
      <div class="goBack" @click="goBack()">
        <i class="iconfont icon-fanhui-xianxing"></i>
      </div>
      <form action="" onSubmit="return false;" @keyup.enter="find()">
        <input type="search" placeholder="请输入关键字" v-model="key" />
      </form>
      <div class="search-icon" @click="find()">
        <i class="iconfont icon-sousuo"></i>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  name: "S_Header",
  data() {
    return {
      key: "",
      history: [],
    };
  },
  components: {},
  methods: {
    find() {
      this.localSave();
      if (this.key) {
        // 路由跳转
        this.$router.push({
          path: "/searchlist",
          query: {
            key: this.key,
          },
        });
      } else {
        return;
      }
    },
    localSave() {
      // 本地存储
      this.history = this.$local.get("history");

      if (this.$local.get("history")) {
        // 本地数据不为空
        this.history = this.$local.get("history");
      } else {
        // 本地数据为空
        this.$local.set("history", "[]");
      }
      // 在开头添加数据
      this.history.unshift(this.key);
      // es6去重
      this.history = Array.from(new Set(this.history));
      // 添加数据到本地
      this.$local.set("history", this.history);

      this.history = [];
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {},
  mounted() {},
};
</script>

<style scoped lang='scss'>
header {
  display: flex;
  justify-content: space-around;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.173333rem;
  line-height: 1.173333rem;
  background-color: #f2f2f2;
  form {
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      padding-left: 0.266667rem;
      width: 7.466667rem;
      height: 0.88rem;
    }
  }

  div {
    text-align: center;
  }
}
</style>